<template>
	<view class="idea">
		<view class="idea-one" v-for="(item,index) in opList" :key="index" @click="getDetails(item)">
			<view class="idea-one-content">
				{{item.content}}
			</view>
			<view class="idea-one-time">
				<view class="idea-one-status">
					{{item.recoveStatus?"已回复":"待处理"}}
				</view>
				{{item.createTime}}
			</view>
			
		</view>
		<view class="input-box" @click="show = true">
			<u-icon name="plus" color="#000" size="50"></u-icon>
		</view>
		<u-popup :show="show" @close="close">
			<view class="popuinput">
				<u--textarea v-model="sendMsg" :maxlength="500" placeholder="请输入内容" count ></u--textarea>
				<u-button type="primary" text="发送" @click="sendOp"></u-button>
			</view>
		</u-popup>
		<u-popup :show="showDetails" @close="closeDetails">
			<view class="popuinput" style="display: flex;flex-direction: column;">
				<h3 style="text-align: center;">{{Details.recoveStatus?"已回复":"待处理"}}</h3>
				意见内容：{{Details.content}}
				<view v-if="Details.recoveStatus">
					回复内容:{{Details.recoveText}}
					<view>
						回复时间：{{Details.recoveTime}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import http from "../../static/http.js"
	export default{
		name:"",
		data(){
			return{
				opList:[],
				show:false,
				sendMsg:"",
				showDetails:false,
				Details:""
			}
		},
		created() {
			this.getAllOp()
		},
		methods:{
			getAllOp(){
				http.httpRequest("/opinion/getUserOp","","POST").then(res=>{
					if(res.data.length == 0){
						uni.showToast({
							title:"暂无数据！",
							icon:"none"
						})
					}
					this.opList = res.data
				})
			},
			sendOp(){
				if(!this.sendMsg.trim()){
					uni.showToast({
						title:"请检查输入！",
						icon:"error"
					})
					return
				}
				http.httpRequest("/opinion/add",{content:this.sendMsg},"POST").then(res=>{
					this.sendMsg = ""
					this.close()
					uni.showToast({
						title:"发表成功！",
						icon:"success"
					})
					this.getAllOp()
				})
			},
			getDetails(item){
				this.Details = item
				this.showDetails = true
			},
			close(){
				this.show = false
			},
			closeDetails(){
				this.showDetails = false
			}
		}
	}
</script>

<style lang="less">
	.idea{
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #f0f0f7;
		overflow: auto;
		.idea-one{
			height: 150rpx;
			line-height: 50rpx;
			padding: 10rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.idea-one-content{
				font-weight: 600;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 40rpx;
			}
			.idea-one-time{
				display: flex;
				margin-top: 20rpx;
				justify-content: space-around;
				.idea-one-status{
					width: 40%;
				}
			}
		}
		.input-box{
			width: 80rpx;
			height: 80rpx;
			position: fixed;
			bottom: 50rpx;
			right: 20rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
		}
		.popuinput{
			width: 100%;
			height: 500rpx;
		}
		/deep/ textarea{
			height: 350rpx !important;
			overflow: auto !important;
		}
	}
</style>